<template>
  <div class="login-contaniner">
    <mt-field class="input-border" label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
    <mt-field class="last-input" label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <mt-button class="log-btn" @click="login" type="primary">登录</mt-button>
  </div>
</template>
<script>
import md5 from 'js-md5'
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // console.log(HP)
       const pData = {
         username: this.username,
         pwd: md5(this.password)
       }
       this.hp.post("api/login",pData).then((data) => {
         localStorage.setItem('username',data.username);
         localStorage.setItem('uid',data.id);
         localStorage.setItem('token',data.token);
         // 对象
         this.$router.push({ path: '/home' })
       }).catch((error) => {
         console.log('登录失败')
       }) 
    }
  }
};
</script>

<style>
.login-contaniner {
  width: 100%;
  margin: 0 1rem 5rem;
}
.log-btn {
  margin-top: 1.4rem;
  width: 100%;
}
.input-border.mint-cell:first-child .mint-cell-wrapper {
  background-origin: content-box;
  padding: 0;
}
.last-input .mint-cell-wrapper {
  border-bottom: 1px solid #d9d9d9;
  background-origin: content-box;
  padding: 0;
}
</style>
